<template>
	<div
		ref="rootRef"
		:tabindex="disabled?-1:0"
		:class="classes()"
		:style="{
			fontSize:toCssLength(size),
			color,
		}"
		@click="clickFn"
	>
		<slot
			name="icon"
			v-bind="slotScope()"
		>
			<div
				class="pf-Checkbox_icon"
			>
				<svg
					focusable="false"
					viewBox="0 0 24 24"
					aria-hidden="true"
				>
					<path
						d="M1.73,12.91 8.1,19.28 22.79,4.59"
						class="pf-Checkbox_tick"
					/>
					<path
						d="M4,14H20V10H4"
						class="pf-Checkbox_cross"
					/>
				</svg>
			</div>
		</slot>
		<div
			v-if="label||$slots.default"
			class="pf-Checkbox_label"
		><slot v-bind="slotScope()">{{label}}</slot></div>
	</div>
</template>

<script setup lang="ts">
import type {
	BeforeProcessor,
} from '../../../type';
import type {
	CheckboxToggleOrder,
} from './type';
import {shallowRef} from 'vue';
import {toCssLength} from '../../../util';
import useStateToggle from '../../../composables/useStateToggle';
/**
 * 多选框组件
 * @author 唐国雄
 * @date 2022/11/18
 * 属性----------------------
 * v-model				当前值
 * :active				手动控制是否打开
 * :before-change		切换前置处理器
 * :name				唯一键, 组合使用时必需
 * :label				标签名
 * :true-value			勾选时的值(单独使用时)
 * :false-value			未勾选时的值(单独使用时)
 * :indeterminate-value		半勾选时的值(单独使用时)
 * :toggle-indeterminate	能否切换到半勾选状态
 * :toggle-order			切换顺序
 * :color				颜色
 * :size				大小
 * :disabled			禁用状态
 * 事件----------------------
 * @update:modelValue	值变化
 * @active				勾选(组合使用时)
 * @inactive			取消勾选(组合使用时)
 * 插槽----------------------
 * #default			自定义标签
 * #icon			自定义图案
 */
const emit=defineEmits<{
	(e:'update:modelValue',val:any):void;
	(e:'active',val:any):void;
	(e:'inactive',val:any):void;
}>();
const props=withDefaults(defineProps<{
	modelValue?:any;
	active?:boolean|'indeterminate'|null;
	beforeChange?:BeforeProcessor<any>;
	name?:any;
	label?:string;
	trueValue?:any;
	falseValue?:any;
	indeterminateValue?:any;
	toggleIndeterminate?:boolean;
	toggleOrder?:CheckboxToggleOrder;
	color?:string;
	size?:string|number;
	disabled?:boolean;
}>(),{
	active:null,
	trueValue:true,
	falseValue:false,
	indeterminateValue:null,
	toggleOrder:'tf',
});
const rootRef=shallowRef<HTMLElement>(null);
//region 状态切换
const {
	activeStatus,
	clickFn,
}=useStateToggle({
	key(){
		return props.name;
	},
	value(){
		return props.modelValue;
	},
	active(){
		return props.active;
	},
	disabled(){
		return props.disabled;
	},
	aloneActive(val):boolean|'indeterminate'{
		if(props.trueValue===val){
			return true;
		}else if(props.falseValue===val){
			return false;
		}
		return 'indeterminate';
	},
	beforeChange:props.beforeChange,
	aloneValue(active){
		const {toggleOrder,toggleIndeterminate}=props;
		if(active===true){
			if(toggleOrder!=='ft'||!toggleIndeterminate){
				return props.falseValue;
			}
		}else if(active===false){
			if(toggleOrder==='ft'||!toggleIndeterminate){
				return props.trueValue;
			}
		}else{
			return toggleOrder!=='ft'
				?props.trueValue
				:props.falseValue;
		}
		return props.indeterminateValue;
	},
	emit,
	rootRef,
});
//endregion
//region 类名
const classes=() => {
	const isActive=activeStatus();
	return 'pf-Checkbox'+
		(isActive===true?' pf--active':isActive===false?' pf--inactive':' pf--indeterminate')+
		(props.disabled?' pf--disabled':'');
};
//endregion
//region 插槽作用域
const slotScope=() => {
	return {
		active:activeStatus(),
		disabled:props.disabled,
	};
};
//endregion
</script>

<script lang="ts">
export default {};
</script>